import { useIntersectionObserver } from '@vueuse/core'
import { install } from 'element-plus'

// 定义全局指令
export const imgLazyPlugin = {
  // install(app){} 这个是自定义插件，必须要有的
  install(app) {
    // 图片懒加载逻辑
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el: 指令绑定的那个元素
        // binding: binding.value 指令等于号后面绑定的表达式的值 图片url
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
          if (isIntersecting) {
            // 图片进入视口区域
            el.src = binding.value
            // 第一次监听并加载完成，就停止监听，其中提供的stop()方法就是停止监听
            stop()
          }
          // console.log(isIntersecting)
        })
      },
    })
  },
}
